<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="destroy">销毁vue实例</button>
    <p v-show="isShow">显示了</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isShow: true,
        intervalId: ''
      },
      // 初始化显示后立即调用
      mounted() {               
        this.intervalId = setInterval(() => {
          // 箭头函数内部没有自己的this，用外部的this
          this.isShow = !this.isShow
          console.log('。。。。')
        }, 1000)
      },
      // 销毁vm前执行
      beforeDestroy() {
        // 在销毁vm前 清除定时器
        clearInterval(this.intervalId)
      },
      methods: {
        destroy() {
          // 销毁vm
          this.$destroy()
          // 销毁后没有切换isShow了，但是定时器还在【内存泄漏】
        }
      }
    })

  </script>
</body>
</html>